<template>
  <van-popup
    v-model="show"
    round
    closeable
    position="bottom"
    @close="resetClose"
  >
    <van-cell
      class="cell-title cell-text"
      :title="`选择${title}`"
    >
    </van-cell>
    <div class="img-icon-box">
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in dataList"
            clickable
            :key="item.id"
            :title="item.name"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                :name="item.id"
                ref="checkboxes"
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <div class="btn-save-box">
      <van-button
        @click="select"
        class="btn-save"
        type="primary"
        block
      >确定</van-button>
    </div>
  </van-popup>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      id: undefined,
      title: '',
      dataList: [],
      result: [],
    }
  },
  methods: {
    resetClose () {
      this.result = []
    },
    toggle (index) {
      this.$refs.checkboxes[index].toggle();
    },
    init (datalist, title) {
      this.dataList = datalist
      this.title = title
      this.show = true
    },
    async select () {
      if (this.result.length === 0) {
        this.$toast('请选择')
        return
      }
      let result = this.result
      this.show = false
      this.$emit('select', result, this.title)
    },
  }
}
</script>

<style lang="less" scoped>
.img-icon-box {
  max-height: calc(50vh);
  padding: 0 0px 23px;
  overflow: auto;
}
.btn-save-box {
  padding: 0 40px 23px;
}
.cell-title {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
::v-deep .van-cell {
  align-items: center;
}
::v-deep .van-cell::after {
  border-bottom: 0;
}
.success-icon {
  font-size: 32px;
  display: none;
}
.active {
  color: @color;
  .success-icon {
    display: block;
  }
}
::v-deep .van-popup__close-icon--top-right {
  font-size: 44px;
  color: #666;
}
</style>
